$font_size: 22px;
$width: 20px;
$height: 44px;
$bg: #CC4331;
$bg_hover: lighten($bg, 5%);
$txt_color: #000;
$bg_shadow: rgba(0,0,0,0.4);

@mixin middle($width, $height) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $width;
  height: $height;
  margin-top: (-$height)/2;
  margin-left: (-$width)/2; 
}

.submit {
  display: block;
  font-size: $font_size;
  text-align: center;
  line-height: $height;
  text-decoration: none;
  color: $txt_color;
  background-color: white;
  border-radius: 4px;
  width:70px;
  height:35	px;
  margin-left:auto;
  margin-right:auto;
  @include middle($width, $height);
  @include text-shadow(0 -1px -1px darken($bg, 7%));
  @include box-shadow(
    0 4px 0 darken($bg, 7%),
    0 5px 5px 1px $bg_shadow);
  @include transition(all .15s ease-in-out);
}
  .cartsubmit {
  display: block;
  font-size: $font_size;
  text-align: center;
  line-height: $height;
  text-decoration: none;
  color: $txt_color;
  background-color: white;
  border-radius: 4px;
  width:100px;
  height:35	px;
  margin-left:auto;
  margin-right:auto;
  @include middle($width, $height);
  @include text-shadow(0 -1px -1px darken($bg, 7%));
  @include box-shadow(
    0 4px 0 darken($bg, 7%),
    0 5px 5px 1px $bg_shadow);
  @include transition(all .15s ease-in-out);
  
  
  &:hover{
    background-color: $bg_hover;
    @include text-shadow(0 -1px -1px darken($bg_hover, 7%));
    @include box-shadow(
      0 4px 0 darken($bg_hover, 7%),
      0 5px 5px 1px $bg_shadow);
  }
  &:active {
    margin-top: (-$height)/2 + 4;
    @include box-shadow(none);
  }
  
}